<template>
    <div class="dark">
        <div class="all_lg dark_bgcolor">
            <div class="loginUser dark_bgcolor2">
                <div> <el-button type="primary" :icon="ArrowLeft"
                        style="margin-left: -380px; margin-top: 20px; width: 80px;height: 40px;"
                        @click="goBack">返回</el-button></div>
                <div class="tabs-container">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="微信扫码登录" name="QRLogin" style="width: 600px;">

                            <div class="qrcode-login-content">
                                <div> <el-row :gutter="0">

                                        <el-col :span="6">
                                            <el-image style="width:50px; height: 50px;" :src="weixinimage" />
                                        </el-col>
                                        <el-col :span="16" style="color: black;">
                                            打开微信扫描二维码
                                        </el-col>

                                    </el-row></div>

                                <div class="qrcode-image-container">
                                    <el-image :src="QrCodeimage" />
                                </div>
                            </div>

                        </el-tab-pane>

                        <el-tab-pane label="账号登录" name="ncLogin">
                            <div><el-text tag="b" class="dark_word2">账号</el-text></div>
                            <div>
                                <el-input class="shurukuang" style="width: 600px;" v-model="inputUsername"
                                    placeholder="请输入您的用户名" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">密码</el-text></div>
                            <div>
                                <el-input class="shurukuang" v-model="inputPassword" placeholder="请输入密码"
                                    type="password" />
                            </div>
                            <div class="button-container">
                                <el-button type="primary" @click="handleLogin">登录</el-button>
                                <el-button @click="toggleTab('registration')">注册</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="验证码登录" name="Logincode">
                            <div><el-text tag="b" class="dark_word2">手机号码</el-text></div>
                            <div>
                                <el-input class="shurukuang" style="width: 600px;" v-model="inputMobile"
                                    placeholder="请输入手机号码" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">验证码</el-text></div>
                            <div>
                                <el-row :gutter="20">
                                    <el-col :span="18">
                                        <el-input class="shurukuang" v-model="Verificationcode" placeholder="请输入您的验证码"
                                            ref="verificationInput" />
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button type="primary"
                                            @click="Getverificationcode('mobilelogin')">获取验证码</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="button-container">
                                <el-button type="primary" @click="handleLoginphone">登录</el-button>
                                <el-button @click="toggleTab('registration')">注册</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="注册" name="registration">
                            <div><el-text tag="b" class="dark_word2">账号</el-text></div>
                            <div>
                                <el-input class="shurukuang" style="width: 600px;" v-model="inputUsername"
                                    placeholder="请输入您的用户名" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">手机号码</el-text></div>
                            <div>
                                <el-input class="shurukuang" v-model="inputMobile" placeholder="请输入手机号码" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">密码</el-text></div>
                            <div>
                                <el-input class="shurukuang" v-model="inputPassword" placeholder="请输入密码"
                                    type="password" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">确认密码</el-text></div>
                            <div>
                                <el-input class="shurukuang" v-model="inputConfirmPassword" placeholder="请再次输入密码"
                                    type="password" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">邮箱地址</el-text></div>
                            <div>
                                <el-input class="shurukuang" style="width: 600px;" v-model="inputEmail"
                                    placeholder="请输入邮箱地址" />
                            </div>
                            <div><el-text tag="b" class="dark_word2">验证码</el-text></div>
                            <div>
                                <el-row :gutter="20">
                                    <el-col :span="18">
                                        <el-input class="shurukuang" v-model="Verificationcode" placeholder="请输入您的验证码"
                                            ref="verificationInput" />
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button type="primary"
                                            @click="Getverificationcode('register')">获取验证码</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="button-container">
                                <el-button type="primary" @click="handleRegister">注册</el-button>
                                <el-button @click="toggleTab('ncLogin')">登录</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ElMessage, } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import "../components/css/Homepage.css";
import { Moon, ArrowLeft } from '@element-plus/icons-vue';
import axios from 'axios';
import { ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { LoginRoot, ILoginRoot, ILoginData, ILoginUserinfo, ICheckUserNameResult, GetBaseURL } from '../../composables/types';
import { setCookie, getCookie } from '../../composables/utils';

export default {
    setup() {

        // 接口地址
        const baseUrl: string = GetBaseURL();
        //const baseUrl: string = "https://api.bishi.turuio.net"; //测试

        ///什么路由
        const router = useRouter();
        const route = useRoute();

        // 用户名
        const inputUsername = ref('');
        // 密码
        const inputPassword = ref('');
        // 手机号码
        const inputMobile = ref('');
        // 确认密码
        const inputConfirmPassword = ref('');
        // 邮箱
        const inputEmail = ref('');
        // 当前活动的标签页
        const activeName = ref('QRLogin');
        // 验证码
        const Verificationcode = ref('');
        // 验证码输入框引用
        const verificationInput = ref(null);
        //微信二维码地址先占用
        const QrCodeimage = ref("src/views/images/erweima.png");
        //微信logo
        const weixinimage = ref("src/views/images/weixin.png");
        // 切换登录注册
        const handleClick = (tab: any, event: Event) => {
            console.log(tab, event);
        };
        //返回上一页
        const goBack = () => {


            router.push('/');
            return;
        };


        // 用户名登录
        const handleLogin = () => {
            // 基本表单验证
            if (!inputUsername.value || !inputPassword.value) {
                errorMessge('请输入用户名和密码');
                return;
            }
            setCookie('TR_mobile', inputMobile.value, 7);
            //用户名
            setCookie('TR_username', inputUsername.value, 7);
            //密码
            setCookie('TR_password', inputPassword.value, 7);
            setCookie('TR_vatar', "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", 7);
            //登陆方法 现在还需要自己设置修改判断
            //用户检测
            checkUsernameAvailable().then(result => {
                // 处理结果
                let checkResult: ICheckUserNameResult;
                checkResult = result;
                if (checkResult.code != 0) {
                    errorMessge(checkResult.msg);
                    // 转换到注册页面
                    toggleTab('registration');
                    //router.push('/');
                }
                else {
                    // 会员登录
                    let loginResult: LoginRoot;
                    memberLogin().then(
                        result => {
                            loginResult = result;
                            console.log(loginResult);
                            if (loginResult.code == 1) {
                                // 保存Token
                                setCookie('TR_token', loginResult.data.userinfo.token, 7);
                                successMessge(loginResult.msg);
                                // 跳转页面
                                router.push('/');
                            }
                            else {
                                errorMessge(loginResult.msg);
                            }
                        }
                    ).catch(
                        error => {
                            errorMessge(loginResult.msg);
                        }
                    );
                }

            }).catch(error => {
                // 处理错误
                console.log(error);
            });
            //router.push('/');

        };

        // 手机号验证码登录
        const handleLoginphone = () => {
            // 手机号
            if (!inputMobile.value) {
                errorMessge('请输入手机号');
                return;
            }
            //验证码
            if (!Verificationcode.value) {
                errorMessge('请输入验证码');
                return;
            }

            // 设置 
            setCookie('TR_mobile', inputMobile.value, 7);
            //用户名
            setCookie('TR_username', inputUsername.value, 7);
            //密码
            setCookie('TR_password', inputPassword.value, 7);
            //头像
            setCookie('TR_vatar', "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", 7);
            // https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png
            //登陆方法 现在还需要自己设置修改判断
            mobileLogin().then(result => {
                // 处理结果
                let loginResult: LoginRoot = new LoginRoot(-1, "", "", {} as ILoginData);
                loginResult = result;
                if (loginResult.code != 1) {
                    errorMessge(loginResult.msg);   //登录失败
                }
                else {
                    // 手机登录成功
                    // 保存Token
                    setCookie('TR_token', loginResult.data.userinfo.token, 7);
                    successMessge(loginResult.msg);
                    router.push('/');
                }
            }

            )
                .catch(error => {
                    console.log(error)
                }
                );
        };

        // 注册
        const handleRegister = () => {
            // 基本表单验证
            // if (!inputUsername.value || !inputMobile.value || !inputPassword.value || !inputConfirmPassword.value || !inputEmail.value) {
            //     errorMessge('请填写所有必填项');
            //     return;
            // }

            if (!inputUsername.value) {
                errorMessge('用户名不能为空');
                return;
            }
            if (!inputMobile.value) {
                errorMessge('手机号不能为空');
                return;
            }
            if (!inputPassword.value) {
                errorMessge('密码不能为空');
                return;
            }
            if (inputPassword.value !== inputConfirmPassword.value) {
                errorMessge('两次输入的密码不一致');
                return;
            }
            if (!inputEmail.value) {
                errorMessge('邮箱不能为空');
                return;
            }
            if (!Verificationcode.value) {
                errorMessge('验证码不能为空');
                return;
            }

            console.log('注册', { mobile: inputMobile.value, password: inputPassword.value, confirmPassword: inputConfirmPassword.value, email: inputEmail.value });

            // 开始注册
            userRegiste().then(result => {
                // 处理结果
                let loginResult: LoginRoot = new LoginRoot(-1, "", "", {} as ILoginData);
                loginResult = result;

                if (loginResult.code == 1) {
                    successMessge(loginResult.msg);    //会员注册成功
                    // 设置 
                    setCookie('TR_mobile', inputMobile.value, 7);
                    //用户名
                    setCookie('TR_username', inputUsername.value, 7);
                    //密码
                    setCookie('TR_password', inputPassword.value, 7);
                    //头像
                    setCookie('TR_vatar', "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", 7);
                    // 邮箱
                    setCookie('TR_email', inputEmail.value, 7);
                    // 保存Token
                    setCookie('TR_token', loginResult.data.userinfo.token, 7);
                    // 手机登录成功
                    router.push('/');
                }
                else {
                    // 手机登录成功
                    //router.push('/');
                    if (loginResult.msg == "" || loginResult.msg == null || loginResult.msg == undefined) {
                        errorMessge('会员注册失败' + loginResult.msg);
                    }
                    else {
                        errorMessge(loginResult.msg); //会员注册失败
                    }

                }
            }

            )
                .catch(error => {
                    console.log(error)
                }
                );

        };

        // 获取验证码
        const Getverificationcode = async (eventName: string) => {
            // successMessge("获取验证码");
            await sendSMSCommand(eventName);

        };

        ///成功提示
        const successMessge = (value: string) => {
            ElMessage({
                message: value,
                type: 'success',
            })
        }
        //错误提示
        const errorMessge = (value: string) => {
            ElMessage.error(value)
        }

        // 切换标签页
        const toggleTab = (name: string) => {
            activeName.value = name;
        };

        // 初始化进入
        onMounted(() => {
            // 从 Cookie 中读取用户名和密码和手机号
            const savedUsername = getCookie('TR_username');
            const savedPassword = getCookie('TR_password');
            const savedMobile = getCookie('TR_mobile');
            if (savedUsername) inputUsername.value = savedUsername;
            if (savedPassword) inputPassword.value = savedPassword;
            if (savedMobile) inputMobile.value = savedMobile;


        });


        // 登录处理方法体集合
        // 检查用户名是否可用
        /**
         * 异步函数用于检查用户名是否可用
         * 
         * 该函数向服务器发送POST请求，检查指定的用户名是否已存在于数据库中
         * 根据服务器的响应返回一个包含检查结果的对象
         * 
         * @returns {Promise<ICheckUserNameResult>} - 返回一个包含检查结果的对象
         */
        async function checkUsernameAvailable(): Promise<ICheckUserNameResult> {
            // 定义检查结果变量
            let checkResult: ICheckUserNameResult;

            // 构造请求数据
            const data = { id: 0, username: inputUsername.value };

            try {
                // 发送POST请求检查用户名是否可用
                const response = await axios.post(`${baseUrl}/api/validate/check_username_available`, data);

                // 将响应数据赋值给检查结果变量
                checkResult = response.data;

                // 返回检查结果
                return checkResult;
            } catch (error) {
                // 当请求失败或后端返回错误时，生成错误信息
                checkResult = { code: -1, msg: "检验用户名是否有效报错," + error, time: "", data: null };

                // 抛出错误以便于调用者处理
                throw error; // 或者根据业务逻辑处理错误
            }
        }

        // 会员登录函数
        // 该函数负责向服务器发送会员登录请求，并处理响应
        // 参数: 无
        // 返回值: Promise<LoginRoot> - 返回一个Promise，包含登录结果对象
        async function memberLogin(): Promise<LoginRoot> {
            let loginResult: LoginRoot;
            // 构造登录请求数据
            const data = { account: inputUsername.value, password: inputPassword.value };
            try {
                // 打印请求URL，用于调试
                console.log(`${baseUrl}/api/user/login`);
                // 发送POST请求进行用户登录
                const response = await axios.post(`${baseUrl}/api/user/login`, data);
                // 解析服务器响应的登录结果
                loginResult = response.data;
                return loginResult;
            } catch (error) {
                // 处理登录异常情况
                loginResult = new LoginRoot(-1, "用户登录报错," + error, "", {} as ILoginData);
                throw error; // 或者根据业务逻辑处理错误
            }
        }

        // 检测手机号是否已存在
        /**
         * 异步函数用于检查手机号是否已存在
         * 
         * 该函数向服务器发送POST请求，检查指定的手机号是否已存在于数据库中
         * 根据服务器的响应返回一个包含检查结果的对象
         * 
         * @returns {Promise<ICheckUserNameResult>} - 返回一个包含检查结果的对象
         */
        async function checkMobileExist(): Promise<ICheckUserNameResult> {
            // 初始化检查结果变量
            let checkResult: ICheckUserNameResult;

            // 准备请求数据，包含要检查的手机号
            const data = { mobile: inputMobile.value };

            try {
                // 发起异步请求，检查手机号是否已存在
                const response = await axios.post(`${baseUrl}/api/validate/check_mobile_exist`, data);

                // 解析响应数据为检查结果
                checkResult = response.data;

                // 返回检查结果
                return checkResult;
            } catch (error) {
                // 在出现异常时，构造错误的检查结果
                checkResult = { code: -1, msg: "检验手机号是否有效报错," + error, time: "", data: null };

                // 抛出错误，以便外部可以捕获和处理
                throw error; // 或者根据业务逻辑处理错误
            }
        }

        // 测检手机是否被占用
        /**
         * 异步函数用于检查手机号是否可用
         * 
         * 该函数向服务器发送POST请求，检查指定的手机号是否已被占用
         * 根据服务器的响应返回一个包含检查结果的对象
         * 
         * @returns {Promise<ICheckUserNameResult>} - 返回一个包含检查结果的对象
         */
        async function checkMobileAvailable(): Promise<ICheckUserNameResult> {
            // 初始化检查结果变量
            let checkResult: ICheckUserNameResult;

            // 准备请求数据，包含要检查的手机号和用户ID（假设id为0表示新用户）
            const data = { mobile: inputMobile.value, id: 0 };

            try {
                // 发起异步请求，检查手机号是否被占用
                const response = await axios.post(`${baseUrl}/api/validate/check_mobile_available`, data);

                // 解析响应数据为检查结果
                checkResult = response.data;

                // 返回检查结果
                return checkResult;
            } catch (error) {
                // 在出现异常时，构造错误的检查结果
                checkResult = { code: -1, msg: "测检手机是否被占用报错," + error, time: "", data: null };

                // 抛出错误，以便外部可以捕获和处理
                throw error; // 或者根据业务逻辑处理错误
            }
        }


        /**
         * 异步函数：检查SMS验证码是否有效
         * @param eventName - 事件名称，用于区分不同场景的验证码验证,如：mobilelogin，register，
         * @returns 返回一个Promise，包含验证结果对象ICheckUserNameResult
         * 
         * 此函数通过axios库发送POST请求到后端服务，以检验提供的SMS验证码是否有效
         * 它使用mobile（用户手机号）、event（事件名称）和captcha（验证码）作为请求参数
         * 如果服务器响应成功，它将返回验证结果；如果发生错误，它将处理错误并抛出异常
         */
        async function checkSMSCode(eventName: string): Promise<ICheckUserNameResult> {
            let checkResult: ICheckUserNameResult;
            // 准备请求数据，包括用户手机号、事件名称和用户输入的验证码
            const data = { mobile: inputMobile.value, event: eventName, captcha: Verificationcode.value };
            try {
                // 发送POST请求到后端API地址，检查验证码有效性
                const response = await axios.post(`${baseUrl}/api/sms/check`, data);
                // 解析响应数据作为验证结果
                checkResult = response.data;
                return checkResult;
            } catch (error) {
                // 在捕获到错误时，设置验证结果的code为-1，并添加错误信息
                checkResult = { code: -1, msg: "检验验证码是否有效报错," + error, time: "", data: null };
                throw error; // 或者根据业务逻辑处理错误
            }
        }


        /**
         * 发送短信命令
         * @param eventName 事件名称，用于区分发送短信的场景
         * @returns {Promise<ICheckUserNameResult>} 返回一个Promise，包含用户名检查结果
         */
        async function sendSMSCommand(eventName: string): Promise<ICheckUserNameResult> {
            let checkResult: ICheckUserNameResult;
            // 构造请求数据，包含手机号和事件名称
            const data = { mobile: inputMobile.value, event: eventName };
            try {
                // 发起发送短信的请求
                const response = await axios.post(`${baseUrl}/api/sms/send`, data);
                // 解析响应数据
                checkResult = response.data;
                console.log('短信已发送', checkResult);
                // 根据响应码判断短信是否发送成功
                if (checkResult.code == 1) {
                    successMessge(checkResult.msg);    //短信已发送
                }
                else {
                    errorMessge(checkResult.msg);    //短信发送失败
                }
                return checkResult;
            } catch (error) {
                // 处理异常情况，设置检查结果码和消息
                checkResult = { code: -1, msg: "获取验证码报错," + error, time: "", data: null };
                throw error; // 或者根据业务逻辑处理错误
            }
        }

        // 手机号验证码登录
        async function mobileLogin(): Promise<LoginRoot> {
            // 初始化登录结果对象
            let loginResult: LoginRoot = new LoginRoot(-1, "", "", {} as ILoginData);
            // 用于存储手机号存在性检查结果
            let checkResult: ICheckUserNameResult;
            // 构造包含手机号和验证码的请求数据
            const data = { mobile: inputMobile.value, captcha: Verificationcode.value };

            try {
                // 检测手机号是否已存在
                checkResult = await checkMobileExist();
                if (checkResult.code != 1) {
                    // 手机号不存在时，显示错误消息并跳转到注册页面
                    errorMessge(checkResult.msg);   //'手机号不存在,请先注册会员'
                    // 转换到注册页面
                    toggleTab('registration');
                    return loginResult;
                }

                // 检测验证码
                checkResult = await checkSMSCode("mobilelogin");
                if (checkResult.code != 1) {
                    // 验证码不正确时，显示错误消息
                    errorMessge(checkResult.msg);    //验证码不正确
                    return loginResult;
                }

                // 登录
                const response = await axios.post(`${baseUrl}/api/user/mobilelogin`, data);
                // 解析登录结果
                loginResult = response.data;
                return loginResult;
            } catch (error) {
                // 异常处理，创建包含错误信息的登录结果对象
                loginResult = { code: -1, msg: "手机号登录报错," + error, time: "", data: {} as ILoginData };
                // 抛出错误，可选地根据业务逻辑处理错误
                throw error;
            }
        }

        // 注册功能异步执行函数
        async function userRegiste(): Promise<LoginRoot> {
            // 初始化登录结果对象
            let loginResult: LoginRoot = new LoginRoot(-1, "", "", {} as ILoginData);
            // 用于存储用户名检查结果的对象
            let checkResult: ICheckUserNameResult;
            // 构造包含注册所需信息的数据对象
            const data = { username: inputUsername.value, password: inputPassword.value, email: inputEmail.value, mobile: inputMobile.value, code: Verificationcode.value };
            try {
                // 检查验证码是否正确
                checkResult = await checkSMSCode("register");
                console.log('验证码', checkResult);
                if (checkResult.code != 1) {
                    errorMessge(checkResult.msg);    // 验证码不正确
                    return loginResult;
                }

                // 检查用户名是否已被占用
                checkResult = await checkUsernameAvailable();
                console.log('用户名', checkResult);
                if (checkResult.code == 0) {
                    errorMessge(checkResult.msg);    // 用户名已存在
                    return loginResult;
                }

                // 检查手机号是否已被注册
                checkResult = await checkMobileAvailable();
                console.log('手机号', checkResult);
                if (checkResult.code == 0) {
                    errorMessge(checkResult.msg);  // 手机号已注册了
                    return loginResult;
                }

                // 向后端发送注册请求
                const response = await axios.post(`${baseUrl}/api/user/register`, data);
                // 解析并返回登录结果
                loginResult = response.data;
                console.log('注册结果', loginResult);
                return loginResult;
            } catch (error) {
                // 异常情况下构造错误的登录结果对象
                loginResult = { code: -1, msg: "手机号登录报错," + error, time: "", data: {} as ILoginData };
                // 抛出错误以便进一步处理
                throw error; // 或者根据业务逻辑处理错误
            }
        }

        return {
            inputUsername,
            inputPassword,
            inputMobile,
            inputConfirmPassword,
            inputEmail,
            activeName,
            Verificationcode,
            handleClick,
            handleLogin,
            handleLoginphone,
            handleRegister,
            Getverificationcode,
            toggleTab,
            verificationInput,
            QrCodeimage,
            weixinimage,
            ArrowLeft,
            goBack
        };
    }
};
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.all_lg {
    height: 1113px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginUser {
    width: 800px;
    height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 使子元素顶部对齐 */
    align-items: center;
}

.tabs-container {
    padding-top: 20px;
    width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 使子元素顶部对齐 */
    align-items: center;
}

.shurukuang {
    width: 500px;
    height: 50px;
}

.button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    height: 40px;
}

.qrcode-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    /* 可以根据需要调整背景颜色 */

}

.qrcode-login-content {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 30px;
    width: 100%;
    width: 500px;
}

.qrcode-image-container {
    margin-top: 50px;
    width: 500px;
    height: 400px;
}
</style>